<template>
  <div class="diary-list-container">
    <div class="header">
      <el-button @click="goHome" circle size="large" class="back-btn">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <h2>💖 情侣日记</h2>
      <el-button type="primary" @click="goToCreate">✍️ 写日记</el-button>
    </div>

    <div class="filter-bar">
      <el-radio-group v-model="filterType" @change="loadDiaryList">
        <el-radio-button label="all">全部日记</el-radio-button>
        <el-radio-button label="mine">我的日记</el-radio-button>
        <el-radio-button label="partner">TA的日记</el-radio-button>
      </el-radio-group>
    </div>

    <div class="diary-timeline" v-loading="loading">
      <div v-if="diaryList.length === 0" class="empty-state">
        <el-empty description="还没有日记哦，快来写第一篇吧！" />
      </div>

      <div v-else class="diary-items">
        <div
          v-for="diary in diaryList"
          :key="diary.id"
          class="diary-card"
          @click="viewDetail(diary.id)"
        >
          <div class="diary-header">
            <div class="diary-info">
              <span class="diary-mood">{{ getMoodEmoji(diary.mood) }}</span>
              <span class="diary-title">{{ diary.title }}</span>
              <el-tag v-if="diary.isPrivate" type="warning" size="small">🔒 私密</el-tag>
            </div>
            <div class="diary-date">
              {{ formatDate(diary.createdAt) }}
            </div>
          </div>

          <div class="diary-content">
            {{ getExcerpt(diary.content) }}
          </div>

          <div class="diary-footer">
            <span class="diary-author">
              {{ diary.userId === userStore.userInfo.id ? '我' : 'TA' }}
            </span>
            <span v-if="diary.weather" class="diary-weather">
              {{ getWeatherEmoji(diary.weather) }} {{ diary.weather }}
            </span>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="loadDiaryList"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getDiaryList } from '@/api'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const filterType = ref('all')
const diaryList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 加载日记列表
const loadDiaryList = async () => {
  loading.value = true
  try {
    const res = await getDiaryList({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })
    
    if (res.code === 200) {
      let list = res.data.records || []
      
      // 根据筛选类型过滤
      if (filterType.value === 'mine') {
        list = list.filter(item => item.userId === userStore.userInfo.id)
      } else if (filterType.value === 'partner') {
        list = list.filter(item => item.userId !== userStore.userInfo.id)
      }
      
      diaryList.value = list
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '加载日记列表失败')
    }
  } catch (error) {
    console.error('加载日记列表失败：', error)
    ElMessage.error('加载日记列表失败')
  } finally {
    loading.value = false
  }
}

// 跳转到创建日记页面
const goToCreate = () => {
  router.push('/diary/create')
}

// 查看日记详情
const viewDetail = (id) => {
  router.push(`/diary/${id}`)
}

// 返回主页
const goHome = () => {
  router.push('/home')
}

// 获取心情 emoji
const getMoodEmoji = (mood) => {
  const moodMap = {
    'happy': '😊',
    'sad': '😢',
    'excited': '😆',
    'calm': '😌',
    'angry': '😠',
    'love': '😍'
  }
  return moodMap[mood] || '😊'
}

// 获取天气 emoji
const getWeatherEmoji = (weather) => {
  const weatherMap = {
    '晴天': '☀️',
    '多云': '⛅',
    '阴天': '☁️',
    '雨天': '🌧️',
    '雪天': '❄️'
  }
  return weatherMap[weather] || '☀️'
}

// 获取摘要
const getExcerpt = (content) => {
  if (!content) return ''
  return content.length > 100 ? content.substring(0, 100) + '...' : content
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

onMounted(() => {
  loadDiaryList()
})
</script>

<style scoped>
.diary-list-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #ff69b4;
  font-size: 28px;
}

.back-btn {
  background: white;
  border: none;
  box-shadow: 0 2px 12px rgba(255, 154, 158, 0.2);
}

.filter-bar {
  margin-bottom: 20px;
  text-align: center;
}

.diary-timeline {
  min-height: 400px;
}

.empty-state {
  padding: 60px 0;
}

.diary-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diary-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(255, 105, 180, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.diary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(255, 105, 180, 0.2);
}

.diary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.diary-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diary-mood {
  font-size: 24px;
}

.diary-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.diary-date {
  color: #999;
  font-size: 14px;
}

.diary-content {
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
}

.diary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #999;
}

.diary-author {
  color: #ff69b4;
  font-weight: bold;
}

.diary-weather {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>

